﻿
let dowCanvas: DowCanvas;//获取画板

function init (){
    let a = document.getElementById("canvas1") as HTMLCanvasElement;
    dowCanvas = new DowCanvas(a.getContext("2d"));
    let json = "[10, 100, 10, 100, 10, 100, 10, 100, 10, 100, 10, 100, 10, 100, 10, 100, 10, 100, 10, 100, 10, 100, 10, 100]";
    onDow(json);
};

function onDow(json: string) {
    dowCanvas.setData(JSON.parse(json));
    dowCanvas.onDow();
}

class DowCanvas {
    canvas: CanvasRenderingContext2D;
    origin: MyCoordinates;
    jsonArray: Array<number>;
    mLength: number = 50;

    constructor(canvas: CanvasRenderingContext2D) {
        this.canvas = canvas;
        this.origin = new MyCoordinates(200, 200);
    }

    setData(jsonArray: Array<number>) {
        this.jsonArray = jsonArray;    
    }

    onDow() {
        this.canvas.clearRect(0,0,1000,500);
        this.canvas.beginPath();
        let screen = TriangleLengthXY(this.origin, 0, this.mLength + this.jsonArray[0]);
        this.canvas.moveTo(screen.x, screen.y);
        let r = 360 / this.jsonArray.length;
        for (let i = 1; i < this.jsonArray.length; i++) {
            let coor = TriangleLengthXY(this.origin, r * i, this.mLength + this.jsonArray[i]);
            this.canvas.lineTo(coor.x, coor.y);
        }
        //let screen = MyTriangle.onLengthXY(this.origin, 0, this.mLength + this.jsonArray[0]);
        this.canvas.lineTo(screen.x, screen.y);
        this.canvas.stroke();
    }
}


